<template>
  <van-divider>
    <div class="flex flex-col justify-center text-xs" v-text="anotherUserLogin" />
  </van-divider>
  <van-row justify="center" class='flex text-center'>
    <van-col span="4" class="flex flex-col" v-for="item in iconArray"
      @click="defaultUserLoginProviderAnonymous(item.loginAction)">
      <Icon :name="item.name" :style="{ color: item.color }" :size="item.size" />
    </van-col>
  </van-row>
</template>

<script lang="ts" setup>
const anotherUserLogin = localesGetValueForKey("anotherUserLogin", "第三方登录")
const iconArray: Array<{ name: string, color: string, size: number, loginAction: string }> = [
  { name: 'uiw:alipay', color: 'blue', size: 20, loginAction: 'login action for alipay' },
  { name: "uiw:weixin", color: "green", size: 20, loginAction: 'login action for weixin' },
  { name: "uiw:weibo", color: "red", size: 20, loginAction: 'login action for weibo' },
  { name: "uiw:qq", color: "darkturquoise", size: 20, loginAction: 'login action for qq' },
  { name: "uiw:apple", color: "lightgray", size: 20, loginAction: 'login action for apple' },
  { name: "uiw:more", color: "darkgray", size: 20, loginAction: 'login action for more' }
]
</script>
